<template>
	<view class="lottery_record">
		<view
			class="l_r_item f f_column"
			v-for="(item,index) in myLottery" :key="index"
		>
			<view class="bold lottery_t">第{{item.issueCode}}期</view>
			<view class="f f_align f_align_center">
				<view class="f f_align_center">
					<view>{{item.lotteryTime}}</view>
					<view class="ml10" v-if="item.jackpotStatusType == '10011001'">等待开奖</view>
				</view>
				<view v-if="item.jackpotStatusType == '10011002'" class="f f_align_center">
					<text>开奖号码</text>
					<view class="f f_align_center">
						<view
							class="r_r_itme"
							v-for="(item1,index) in item.lotteryNumber" :key="index"
						>{{item1}}</view>
					</view>
				</view>
			</view>
			<view
				v-for="(iLine,_i) in item.raffleTicketList"
				:key="_i"
				class="raffle_bottom f f_align f_align_center"
			>
				<view class="f f_align_center raff_item">
					<view class="f f_align_center">
						<view
							v-for="(item2,ins) in iLine.redeemCode"
							:key="ins"
							:class="iflottery(item,item2,ins)"
						>{{item2}}</view>
					</view>
					<view class="" v-if="item.jackpotStatusType == '10011001'">
						<text class="tip_c">待开奖</text>
					</view>
					<view class="" v-else>
						<text class="tip_c" v-if="iLine.brokerageAmount && iLine.brokerageAmount > 0">{{jackpot_rank(item.lotteryNumber,iLine.redeemCode)}}</text>
						<text v-else>未中奖</text>
					</view>
				</view>
				<view v-if="iLine.brokerageAmount && iLine.brokerageAmount > 0" class="gold_d bold">{{iLine.brokerageAmount}}金币</view>
				<view v-else class="">
					{{item.jackpotStatusType == '10011002' ? '无奖励' : '暂无奖励'}}
				</view>
				<view class="raff_ico">{{_i+1}}</view>
			</view>
		</view>

		<!-- 加载 -->
		<loadMore :isLoading="isLoading" :isDone="isDoneTask" />
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import loadMore from '@/components/loadMore/loadMore'
	export default {
		data() {
			return {
				isLoading:false,
				isDoneTask:false,

				myLottery:[],
				page:{
					pageIndex:1,
					limit:10,
					totalPage:0
				},
			};
		},
		computed:{
			...mapState({
				jackpot_status_type:state => state.dictArrs.jackpot_status_type
			})
		},
		onLoad() {
			this.$store.dispatch('getDictlists','jackpot_status_type');
		},
		onShow() {
			this.init();
		},
		methods:{
			//查询所有的参与的抽奖
			async init(){
				const _this = this;
				_this.isLoading = true;
				_this.isDoneTask = false;
				let res = (await _this.$http('/api/auth/raffleTicket/listPersonRaffleTicket','POST',{
					page:_this.page.pageIndex,
					limit:_this.page.limit
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				if(res && res.code == '0'){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.myLottery.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.myLottery = _this.myLottery.concat(list);
				}else{
					_this.$showToast(res.msg);
				}
			},
			//是否中奖
			iflottery(item,redeemCode,index){
				//已经开奖
				let classStyle = 'r_r_itme_now';
				if(item.jackpotStatusType == '10011002'){
					let lotteryNumber =  item.lotteryNumber.toString();
					if(lotteryNumber[index] == redeemCode){
						classStyle = 'r_r_itme_now active';
					}else{
						classStyle = 'r_r_itme_now';
					}
				}
				return classStyle
			},
			//中奖等级判断
			jackpot_rank(jacoNum,recode){
				let count = 0;
				let raffStr = '未中奖';
				for(let i=0;i<jacoNum.length;i++){
					if(jacoNum[i] == recode[i]){
						count++;
					}
				};
				switch (count){
					case 6:
						raffStr = '特等奖';
						break;
					case 5:
						raffStr = '一等奖';
						break;
					case 4:
						raffStr = '二等奖';
						break;
					case 3:
						raffStr = '三等奖';
						break;
					default:
						raffStr = '未中奖';
						break;
				}
				return raffStr;
			}
		},
		onPullDownRefresh() {
			this.page.pageIndex = 1;
			this.init();
		},
		//滚动到底部
		onReachBottom() {
			const _this =this;
			if(_this.page.pageIndex < _this.page.totalPage){
				_this.page.pageIndex++;
				_this.init();
			}else{
				_this.isDoneTask = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lottery_record{
		box-sizing: border-box;
		width: 100%;
		border-top: solid 2rpx #E6E6E6;
		padding:0 24rpx 24rpx;
		.l_r_item{
			padding: 24rpx 24rpx 20rpx;
			background-color:#FFF3F3;
			border-radius: 8rpx;
			margin-top: 24rpx;
			font-size: 22rpx;
			color: #999;
			.lottery_t{
				font-size: 30rpx;
				color: #000;
				margin-bottom: 8rpx;
			}
			.r_r_itme{
				width: 36rpx;height: 36rpx;
				@include flex_center;
				color: #AB7604;
				border-radius: 50%;
				background-image: linear-gradient(#FEE068,#FDCA55);
				margin-left: 4rpx;
			}
			.raffle_bottom{
				padding: 52rpx 24rpx 24rpx;
				background-color: #fff;
				border-radius: 8rpx;
				margin-top: 17rpx;
				color: #000;
				position: relative;
				font-size: 24rpx;
				.tip_c{color: #FF3C39;}
				.raff_ico{
					position: absolute;
					top: 0;
					left: 0;
					width: 72rpx;height: 40rpx;
					background-color: #FCE0C8;
					border-radius: 8rpx 0 40rpx 0;
					color: #AC7938;
					display: flex;
					align-items: center;
					padding-left: 35rpx;
				}
				.raff_item{
					border-right: solid 1rpx #EEEEEE;
					height: 56rpx;
					padding-right: 46rpx;
					.r_r_itme_now{
						width: 48rpx;height: 48rpx;
						background-color: #DEDEDE;
						font-size: 28rpx;
						border-radius: 50%;
						margin-right: 8rpx;
						color: #fff;
						@include flex_center;
						&:last-child{
							margin-right: 32rpx;
						}
						&.active{
							background-image: linear-gradient(#FDDF67,#FDCA55);
						}
					}
				}
				.gold_d{
					color: #FF3C39;
				}
			}
		}
	}
</style>
